<template>
  <div class="signature-date-field" :class="getIndentClass(modelValue.alignment)">
    <div class="signature-part">
      <span class="label" :class="{ 'bold-text': modelValue.isBold }">{{ modelValue.signatureLabel }}</span>
      <span class="signature-line" :style="{ width: `${modelValue.signatureLineLength * 40}px` }"></span>
    </div>
    <div class="date-part">
      <span class="label" :class="{ 'bold-text': modelValue.isBold }">{{ modelValue.dateLabel }}</span>
      <span class="date-format" :class="{ 'bold-text': modelValue.isBold }">
        |___|年|___|月|___|日
      </span>
    </div>
  </div>
</template>

<script setup>
defineProps({
  modelValue: {
    type: Object,
    required: true,
    default: () => ({
      signatureLabel: '研究者签字:',
      signatureLineLength: 5, // cm
      dateLabel: '日期: 202',
      alignment: 'indent-0'
    })
  }
})

const getIndentClass = (alignment) => {
  const indentMap = {
    'indent-0': 'indent-0',
    'indent-1': 'indent-1',
    'indent-2': 'indent-2',
    'indent-3': 'indent-3',
    'indent-4': 'indent-4',
    'indent-5': 'indent-5'
  }
  return indentMap[alignment] || 'indent-0'
}
</script>

<style scoped lang="scss">
@import '@/assets/common-styles.scss';

.signature-date-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  font-size: 14px;
  color: #303133;
}

.signature-part,
.date-part {
  display: flex;
  align-items: center;
  gap: 8px;
}

.signature-line {
  display: inline-block;
  border-bottom: 1px solid #000;
  height: 12px;
}

.date-format {
  letter-spacing: 1px;
}

.bold-text {
  font-weight: bold;
}
</style> 